import {Component} from 'react'
import {connect} from 'react-redux'
import {actions} from '$reducers/counter'

class Counter extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        let {counter, increment, delerement, reset} = this.props
        return (
            <div>
                Current count is {counter.count}
                <div>
                    <button onClick={increment}>+</button>
                    <button onClick={delerement}>-</button>
                    <button onClick={reset}>reset</button>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        counter: state.counter
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        increment: () => {
            dispatch(actions.increment())
        },
        delerement: () => {
            dispatch(actions.delerement())
        },
        reset: () => {
            dispatch(actions.reset())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)